import Collapse from "./collapse.js";
import CollapseItem from "./collapse-item.js";

customElements.define('my-collapse', Collapse);
customElements.define('my-collapse-item', CollapseItem);


// 设置组件默认显示的状态

let defaultActive = ['1', '2'];

 document.querySelector('my-collapse').setAttribute('active', JSON.stringify(defaultActive));

 // 每个Item都需要获取到defaultActive，然后跟自身的name属性进行比较，判断是否在defaultActive里面呢，在的话就显示，不在的话就隐藏。

document.querySelector('my-collapse').addEventListener('changeName', function (e) {
   console.log(e);
   const {isShow, name} = e.detail;
   if (isShow) {
    let index = defaultActive.indexOf(name);
    defaultActive.splice(index, 1);
   } else {
    defaultActive.push(name);
   }
   document.querySelector('my-collapse').setAttribute('active', JSON.stringify(defaultActive));
})